import axios from 'axios';
import React, { useEffect, useState } from 'react'
import { useNavigate, useSearchParams } from 'react-router-dom'
import style from './style.module.css';
// 定义一个List组件
const List = () => {
  // 使用useSearchParams获取URL中的参数
  const [searchParams] = useSearchParams();
  // 获取start参数
  const start = searchParams.get('start')
  // 获取end参数
  const end = searchParams.get('end')
  // 定义一个list状态，用于存储航班列表
  const [list, setList] = useState([])
  // 使用useNavigate获取路由跳转函数
  const navigate = useNavigate()
  // 定义一个异步函数，用于获取航班列表
  const getList = async () => {
    // 发送GET请求，获取航班列表
    const resp = await axios.get('/api/trip/airplane', {
      params: {
        start, end
      }
    })
    // 打印航班列表
    console.log(resp.data.data.body.fl)
    // 设置航班列表
    setList(resp.data.data.body.fl)
  }

  // 定义一个函数，用于跳转到航班详情页
  const toDetail = (v) => {
    // 使用navigate函数跳转到航班详情页
    navigate(`/detail/${v.atp}`, { state: v })
  }
  // 使用useEffect函数，在组件加载时获取航班列表
  useEffect(() => {
    getList()
  }, [])
  // 返回组件的JSX结构
  return (
    <div>
      <div className="list">
        {
          // 遍历航班列表，生成航班项
          list.map((v, i) => {
            return <div key={i} className={style['item']} onClick={() => toDetail(v)}>
              <div className={style['time']}>
                {v.dt}
              </div>
              <div className={style['middle']}>
                {v.dasn}{v.dat}到{v.aasn}{v.aat}
              </div>
              <div className={style['type']}>
                {v.amn}{v.amt}  <span style={{ color: 'red' }}>￥{v.atp}</span>
              </div>
            </div>
          })
        }
      </div>
    </div>
  )
}

// 导出List组件
export default List